<template>
  <div class="content-box">
    <slot name="content-label">
      <div v-if="label" :style="labelBoxStyle">
        <h4 v-if="bold">{{ label }}：</h4>
        <span v-else>{{ label }}：</span>
      </div>
    </slot>
    <div :style="getBoxStyle()">
      <el-tooltip
        v-if="enableTooltip && showTitle"
        effect="dark"
        placement="top-start"
        :content="content"
      >
        <div class="content-wrap" :style="`maxWidth: ${this.maxWidth}`">
          {{ content }}
        </div>
      </el-tooltip>
      <template v-else>
        <div ref="contentRef" class="content-wrap">{{ content }}</div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    textContent: { // 展示文本
      type: String | Number,
      default: ''
    },
    enableTooltip: {
      type: Boolean,
      default: true
    },
    maxWidth: {
      type: String,
      default: '200px'
    },
    fontSize: {
      type: String,
      default: '13px'
    },
    fontColor: {
      type: String,
      default: '#85888e'
    },
    bold: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: 'auto'
    },
    labelTextAlign: {
      type: String,
      default: 'right'
    },
    labelFontSize: {
      type: String,
      default: '14px'
    }
  },
  data () {
    return {
      showTitle: false, // 是否显示toolTip
    }
  },
  computed: {
    content () {
      return this.textContent + ''
    },
    // label容器样式
    labelBoxStyle () {
      const boxStyle = `width:${this.labelWidth};text-align:${this.labelTextAlign};font-size:${this.labelFontSize}`
      return boxStyle
    }
  },
  watch: {
    textContent: {
      handler () {
        this.$nextTick(() => {
          this.initShowTitle()
        })
      },
      immediate: true
    }
  },
  updated () {
    this.initShowTitle()
  },
  methods: {
    // 初始化是否展示tooltip
    initShowTitle () {
      const spanDom = this.$refs.contentRef // 文本内容
      if (!spanDom) return
      const { val, unit } = this.getWidthInfo(this.maxWidth)
      const percent = (spanDom.offsetWidth / val).toFixed(1) * 100
      const childWidth = unit == '%' ? percent : spanDom.offsetWidth
      this.showTitle = childWidth >= val
    },
    // 获取宽度信息
    getWidthInfo (maxWidthStyle) {
      let unit = ''
      if (maxWidthStyle.indexOf('px') != -1) unit = 'px'
      if (maxWidthStyle.indexOf('%') != -1) unit = '%'
      const val = ~~maxWidthStyle.replace(unit, '')
      return { val, unit }
    },
    // 获取容器样式
    getBoxStyle () {
      const maxWidthStyle = `maxWidth: ${this.maxWidth};`
      const fontColor = `color: ${this.fontColor};`
      const fontSize = `fontSize: ${this.fontSize};`
      const lineHeight = `lineHeight: ${this.fontSize};`
      const style = maxWidthStyle + fontColor + fontSize + lineHeight
      return style
    },
  }
}
</script>
<style lang="less" scoped>
.content-box {
  display: flex;
  align-items: center;
}
.content-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
